/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-02-23 15:46:26
 */
import { FormBasicData, FormConfig, FormUpload } from '@/components'
import { DoType, getDoTypeTitle } from '@/interfaces'
import { errorTips, successTips } from '@/utils'
import { isTrue } from '@/utils/tools'
import { clone, equals } from 'ramda'
import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue'
import { BasicDataModule } from '@/store/modules/basicData'
const props = {
	visible: {
		type: Boolean as PropType<boolean>,
		required: true,
	},
	dataSource: {
		type: Object as PropType<defs.server.MovieEntity>,
	},
} as const
export default defineComponent({
	props,
	name: 'CreateIndex',
	emits: ['cancel', 'search'],
	setup(props, { emit }) {
		const rules = {
			name: [{ required: true, message: '请输入分类名称', trigger: 'change' }],
			introduction: [{ required: true, message: '请输入介绍', trigger: 'change' }],
			sort: [{ required: true, type: 'number', message: '请输入排序值', trigger: 'change' }],
			status: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
			free: [{ required: true, type: 'number', message: '请选择是否收费', trigger: 'change' }],
			category: [{ required: true, type: 'array', message: '请选择类型', trigger: 'change' }],
			tags: [{ required: true, type: 'array', message: '请选择标签', trigger: 'change' }],
			isRecommend: [{ required: true, type: 'number', message: '请选择是否推荐', trigger: 'change' }],
			playCount: [{ required: true, type: 'number', message: '请输入播放量', trigger: 'change' }],
			rating: [{ required: true, type: 'number', message: '请输入评分', trigger: 'change' }],
			popularity: [{ required: true, type: 'number', message: '请输入热度', trigger: 'change' }],
			lang: [{ required: true, message: '请选择语言', trigger: 'change' }],
		}
		const pageState = reactive({
			loading: false,
			type: DoType.create,
			formData: {} as defs.server.MovieEntity,
		})
		function cancel() {
			pageState.type = DoType.create
			pageState.formData = {} as defs.server.MovieEntity
			pageState.loading = false
			emit('cancel')
		}
		async function submit() {
			const params = {
				name: pageState.formData.name,
				cover: pageState.formData.cover,
				free: pageState.formData.free,
				introduction: pageState.formData.introduction,
				lang: pageState.formData.lang,
				tags: pageState.formData.tags,
				category: pageState.formData.category,
				isRecommend: pageState.formData.isRecommend,
				playCount: pageState.formData.playCount,
				status: pageState.formData.status,
				rating: pageState.formData.rating,
				popularity: pageState.formData.popularity,
				isMustWatch: pageState.formData.isMustWatch ?? false,
				isCurrentlyAiring: pageState.formData.isCurrentlyAiring ?? false,
				isFeatured: pageState.formData.isFeatured ?? false,
				id: pageState.formData.id as number,
			}
			const func = equals(pageState.type, DoType.create)
				? API.server.movie.createMovie.request
				: API.server.movie.updateMovie.request
			pageState.loading = true
			const { success, msg } = await func(params)
			pageState.loading = false
			if (success) {
				successTips(`${getDoTypeTitle(pageState.type)}成功`)
				cancel()
				emit('search')
				BasicDataModule.getCategoryList()
				return
			}
			errorTips(msg)
		}
		watch(
			() => props.visible,
			(visible) => {
				if (visible) {
					pageState.formData = clone(props.dataSource) ?? {} as defs.server.MovieEntity
					pageState.type = isTrue(props.dataSource?.id) ? DoType.edit : DoType.create
				}
			}
		)
		return () => (
			<div>
				<a-modal
					title={`${getDoTypeTitle(pageState.type)}分类`}
					visible={props.visible}
					onCancel={cancel}
					footer={null}
					centered
					confirmLoading={pageState.loading}
					width={'60%'}
				>
					<a-form
						class="ant-advanced-search-form"
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 14 }}
						model={pageState.formData}
						rules={rules}
						onFinish={submit}
					>
						<a-row>
							<a-col span={18}>
								<a-row>
									<a-col span={12}>
										<a-form-item name="name" label="剧集标题">
											<a-input v-model={[pageState.formData.name, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="free" label="是否收费">
											<FormConfig prop="freeType" v-model={[pageState.formData.free, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="category" label="类型">
											<FormBasicData
												prop="categoryList"
												filter={(item) => equals(item.lang, pageState.formData.lang)}
												mode='multiple'
												v-model={[pageState.formData.category, 'value']}
											/>
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="tags" label="标签">
											<FormBasicData
												prop="tagsList"
												filter={(item) => equals(item.lang, pageState.formData.lang)}
												mode='multiple'
												v-model={[pageState.formData.tags, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="isRecommend" label="是否推荐">
											<FormConfig prop="flag" v-model={[pageState.formData.isRecommend, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="playCount" label="播放量">
											<a-input-number min={0} v-model={[pageState.formData.playCount, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="status" label="是否上架">
											<FormConfig prop="status" v-model={[pageState.formData.status, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="lang" label="语言">
											<FormConfig prop="lang" v-model={[pageState.formData.lang, 'value']}
												onChange={() => {
													pageState.formData.category = []
													pageState.formData.tags = []
												}}
											/>
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="rating" label="评分">
											<a-input-number min={0} v-model={[pageState.formData.rating, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="popularity" label="热度">
											<a-input-number min={0} v-model={[pageState.formData.popularity, 'value']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="isMustWatch" label="是否为必看剧">
											<a-switch v-model={[pageState.formData.isMustWatch, 'checked']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="isCurrentlyAiring" label="是否为当前热播剧">
											<a-switch v-model={[pageState.formData.isCurrentlyAiring, 'checked']} />
										</a-form-item>
									</a-col>
									<a-col span={12}>
										<a-form-item name="isFeatured" label="是否为精彩剧集">
											<a-switch v-model={[pageState.formData.isFeatured, 'checked']} />
										</a-form-item>
									</a-col>
									<a-col span={24}>
										<a-form-item name="introduction" labelCol={{ span: 4 }}
											wrapperCol={{ span: 19 }} label="介绍">
											<a-textarea rows={4} v-model={[pageState.formData.introduction, 'value']} />
										</a-form-item>
									</a-col>
								</a-row>
							</a-col>
							<a-col span={6}>
								<a-form-item name="cover" wrapperCol={{ span: 24 }} style={{ textAlign: 'center' }}>
									<FormUpload
										style={{ width: '150px', aspectRatio: 3 / 4, margin: '0 auto' }}
										v-model={[pageState.formData.cover, 'src']}
									>
									</FormUpload>
								</a-form-item>
							</a-col>
						</a-row>
						<div style={{ textAlign: 'center' }}>
							{[DoType.create, DoType.edit].includes(pageState.type) && (
								<a-button type="primary" loading={pageState.loading} html-type="submit">
									提交
								</a-button>
							)}
							<a-button onClick={cancel}>取消</a-button>
						</div>
					</a-form>
				</a-modal>
			</div>
		)
	},
})
